<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单评价</title>
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../js/bootstrap-table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="../../font/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../font/iconfont/iconfont.ttf">
    <link rel="stylesheet" href="../../css/common.css"/>
    <link rel="stylesheet" href="../../css/myOrder/myorder.css">
    <style>
        .bottom-right {
            margin-right: 20px;
        }

        .type .head {
            text-align: center;
        }

        .icon-star {
            font-size: 30px;
            margin-left: 10px;
            color: orange;
        }

        .star-top {
            margin-top: 10px;
        }
        #evaluation_order_list{
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div class="tab-pane fade in active body" id="evaluation_order">
    <form role="form " class="form">
        <div class="type">
            <div class="row ">
                <div class="col-lg-3 col-sm-4">
                    <div>分类（可多选）</div>
                    <div>Category (multiple choice）</div>
                </div>
                <ul>
                    <li>
                        <label class="check-btn btn btn-default col-lg-2 col-sm-2">
                            类别选择</br>Category selection
                        </label>
                        <div id="triangle1"></div>
                        <div class="hidDiv" id="category">类别选择
                            <button class="yesBtn">确定</button>
                        </div>
                    </li>
                    <li>
                        <label class="check-btn  btn btn-default col-lg-2 col-sm-2">
                            种类选择</br>Kind of choice
                        </label>
                        <div id="triangle2"></div>
                        <div class="hidDiv" id="kindOf">种类选择
                            <button class="yesBtn">确定</button>
                        </div>
                    </li>
                    <li>
                        <label class="check-btn  btn btn-default col-lg-2 col-sm-2">
                            品牌选择</br>Brand choice
                        </label>
                        <div id="triangle3"></div>
                        <div class="hidDiv" id="brand">品牌选择
                            <button class="yesBtn">确定</button>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="res-btn top">
                <div class="col-lg-5 col-sm-5"></div>
                <div class="col-lg-7 col-sm-7 ">
                    <div class="row pull-right bottom-right">
                        <button class="col-sm-4 bottom-right btn-2">
                            查找Find
                        </button>
                        <button class="col-sm-4 btn-2">
                            重置Reset
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <div class="form">
        <div class="type">
            <div class="col-lg-11 col-sm-10 row bottom head">
                <div class="col-lg-2 col-sm-2 active">
                    <div>全部</div>
                    <div>All</div>
                </div>
                <div class="col-lg-2 col-sm-3 btns">
                    <div>最新</div>
                    <div>Up to date</div>
                </div>
                <div class="col-lg-2 col-sm-2 btns">
                    <div>低分</div>
                    <div>Low score</div>
                </div>


            </div>
            <div style="clear: both">
                <div class="top border-bottom"></div>
            </div>
            <div class="row top">

                <div id="evaluation_order_list">
                    <div class="border-bottom">
                    <div class="row ">
                        <div class="col-lg-1 col-sm-2" >
                            <img class="img-circle " src=../../image/myorder/food1.png>
                        </div>
                        <div class="col-lg-8 col-sm-7">
                            <div class="star-top">The user name
                                <br>
                                2017/11/11
                                <span class="icon-font icon-star"></span>
                                <span class="icon-font icon-star"></span>
                                <span class="icon-font icon-star"></span>
                                <span class="icon-font icon-star"></span>
                                <span class="icon-font icon-star"></span>
                                <br>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-3">
                            <div class="row star-top pull-right bottom-right">
                                <div>这里是用户所在区域</div>
                                <div>here is the user area</div>
                            </div>
                        </div>
                    </div>
                    <div class="bottom">
                        太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒
                        太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒
                        太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒
                        太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒太好吃了，棒棒棒
                        太好吃了，棒棒棒太好吃了，棒棒棒
                    </div>
                </div>
                </div>
            </div>
        </div>

    </div>
    </div>


</div>
</body>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../js/common.js"></script>
<script src="../../js/transaction/highcharts.js"></script>
<script>
    $(function () {
        // getScoreList();
        intiBnt();
    })

    /*
    * @description : 类型选择的按钮
    * @params:
    * @author : peng huaneng
    * @date : 2018/1/19 10:07
    */
    function intiBnt() {
        $(".check-btn").on("click",function(){
            $(this).parent("li").find("div").each(function(){
                $(this).css("display","block");
            })
            $(this).parent("li").siblings("li").each(function(){
                $(this).find("div").each(function(){
                    $(this).css("display","none");
                })
            })
        })
        $(".yesBtn").on("click",function(){
            $(this).parent("div").css("display","none");
            $(this).parent("div").prev().css("display","none");
        })

        $(".select_a").on("click",function(){
            var divId = $(this).attr("click_div");
            $(".select_a_div_triangle").css("display","none");
            $(".select_a_div").css("display","none");
            $("#"+divId).css("display","block");
            $("#"+divId).prev().css("display","block");
        })
    }

    function typeChoose(value,id) {
        var orglist = [{
            id: 1,
            name: "x"
        }, {
            id: 2,
            name: "ed"
        }, {
            id: 3,
            name: "fe"
        }, {
            id: 4,
            name: "fe"
        }
            , {
                id: 5,
                name: "fe"
            }
            , {
                id: 6,
                name: "fe"
            }
            , {
                id: 7,
                name: "fe"
            }
            , {
                id: 8,
                name: "fe"
            }
            , {
                id: 9,
                name: "fe"
            }, {
                id: 10,
                name: "fe"
            }
            ];
        $(id).html('');
        var html = '';

        html += '<div style="width: 500px ; height: auto;padding: 15px ;z-index: 9999">';
        html += '<div class="row">';
        for (var i = 0; i < orglist.length; i++) {
            html += '<div class="col-lg-3"> ' +
                '<div class="checkbox">' +
                '<label><input type="checkbox" name="types" value="'+orglist[i].id+'">'+orglist[i].name+'</label>' +
                '</div> </div>'
            //每 4 个 换行
            if ((i+1) % 4 == 0) {
                html += '</div> <div class="row">';
            }
        }
        html += "</div> <div style=' text-align: center;'><div class='btn btn-default' > 确定<br>OK</div></div></div> ";
        $(id).html(html);
        $(id).show();


    }

    /*
      * @description : 获取用户评分
      * @params:
      * @author : peng huaneng
      * @date : 2018/1/18 9:33
      */
    function getScoreList() {
        var html = "";
        // AJAX请求
        var data = {
            url: "../../image/myorder/food1.png",
            userName: "张三",
            userNameEn: "zhangsan",
            userArea: "成都",
            userAreaEn: "chengdu",
            score: 5,
            goodsName: "棒棒糖",
            goodsNameEn: "BBt",
            evaluation: "太好吃了，棒棒棒",
            evaluationEn: "this is very good !!!"
        };
        html = '<div class="row top">' +
            '<div class="row">' +
            '<div class="col-lg-1">' +
            '<img class="img-circle" src=' + data.url + ' > </div>' +
            '<div class="col-lg-2"> <div>' +
            '<div>' + data.userName + '</div>' +
            '<div>' + data.userNameEn + '</div>' +
            '</div>' +
            '<div>' + data.userArea + '</div>' +
            '<div>' + data.userAreaEn + '</div>' +
            '</div> </div> </div>' +
            '<div class="row">' +
            '<div class="col-lg-1">' +
            '<div>给出评分<br>score</div> </div>' +
            '<div class="col-lg-1">';
        if (data.score == 5) {
            html += '<img src="../../image/myorder/star.png">';
        }

        html += ' </div> <div class="col-lg-3">';
        html += '<div>' + data.goodsName + '</div>';
        html += '<div>' + data.goodsNameEn + '</div></div> </div> </div> <div>';
        html += '<textarea class="form-control" rows="3"  readonly="true">' + data.evaluation + '\n' + data.evaluationEn + '</textarea> </div> </div>';
        console.log(html);
        $("#evaluation_order_list").html(html + html);
    }


</script>
</html>